<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>我喜欢的音乐 - 音乐服务器</title>

    <!-- 引入Tailwind CSS实现现代UI -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1', // 主色调：靛蓝色
                        secondary: '#ec4899', // 辅助色：粉色（契合"喜欢"主题）
                        neutral: '#f3f4f6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-favorite {
                background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.1), 0 8px 10px -6px rgba(236, 72, 153, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-secondary/50 focus:border-secondary focus:outline-none;
            }
            .table-hover-row {
                @apply hover:bg-pink-50 transition-colors;
            }
            .btn-hover-effect {
                @apply hover:shadow-md hover:shadow-secondary/20 active:scale-95 transition-all;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="w-10 h-10 rounded-full bg-gradient-favorite flex items-center justify-center text-white">
                <i class="fa fa-heart"></i>
            </div>
            <h1 class="text-xl font-bold text-gray-800">我的收藏</h1>
        </div>

        <div class="flex items-center space-x-4">
            <a href="list.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-1"></i>
                <span class="hidden sm:inline">音乐首页</span>
            </a>
            <a href="upload.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-upload mr-1"></i>
                <span class="hidden sm:inline">上传歌曲</span>
            </a>
            <a href="user.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-user mr-1"></i>
                <span class="hidden sm:inline">用户</span>
            </a>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <!-- 标题和搜索区域 -->
    <div class="mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 mb-4 flex items-center">
            <i class="fa fa-heart text-secondary mr-2"></i>我喜欢的音乐
        </h2>

        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <!-- 搜索框 -->
            <div class="flex-grow max-w-md">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                        <i class="fa fa-search"></i>
                    </div>
                    <input
                            type="text"
                            id="exampleInputName2"
                            placeholder="搜索收藏的歌曲或歌手..."
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                    >
                </div>
            </div>

            <!-- 搜索按钮 -->
            <div>
                <button id="submit1" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg btn-hover-effect flex items-center">
                    <i class="fa fa-search mr-2"></i>
                    <span>搜索收藏</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 收藏列表 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                <tr class="bg-pink-50 text-left">
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">歌名</th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">歌手</th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">播放</th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody id="info" class="divide-y divide-gray-200">
                <!-- 收藏列表将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>

        <!-- 空状态 -->
        <div id="emptyState" class="hidden py-16 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-pink-100 text-secondary mb-4">
                <i class="fa fa-heart-o text-2xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-1">暂无收藏的音乐</h3>
            <p class="text-gray-500 max-w-md mx-auto">去音乐首页收藏一些喜欢的音乐吧</p>
            <button class="mt-4 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg btn-hover-effect" onclick="window.location.href='list.html'">
                <i class="fa fa-music mr-2"></i>浏览音乐库
            </button>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6 mt-8">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>&copy; 2025 音乐服务器 | 我的收藏</p>
    </div>
</footer>

<!-- 音乐播放器 -->
<div class="fixed bottom-0 right-0 m-4 bg-white rounded-xl shadow-lg overflow-hidden z-20 w-72">
    <div class="bg-gradient-favorite p-3 text-white">
        <h3 class="font-medium">正在播放</h3>
    </div>
    <div class="p-4">
        <div class="flex items-center space-x-3 mb-3">
            <div class="w-12 h-12 rounded bg-pink-100 flex-shrink-0 flex items-center justify-center">
                <i class="fa fa-music text-secondary"></i>
            </div>
            <div>
                <h4 class="font-medium text-gray-800 truncate" id="playingTitle">时间都去哪儿了</h4>
                <p class="text-sm text-gray-500" id="playingSinger">未知歌手</p>
            </div>
        </div>
        <div class="flex items-center justify-between text-gray-500 mb-2">
            <span id="currentTime">0:00</span>
            <span id="totalTime">3:45</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-3">
            <div class="bg-secondary h-1.5 rounded-full" style="width: 25%"></div>
        </div>
        <div class="flex items-center justify-between text-gray-600">
            <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100">
                <i class="fa fa-step-backward"></i>
            </button>
            <button class="w-10 h-10 flex items-center justify-center rounded-full bg-secondary text-white hover:bg-secondary/90">
                <i class="fa fa-pause"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100">
                <i class="fa fa-step-forward"></i>
            </button>
        </div>
    </div>
</div>

<!-- 引入jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>

<!-- 收藏列表逻辑 (保持原有逻辑不变) -->
<script>
    $(function(){
        load();

        // 搜索按钮点击事件
        $("#submit1").click(function() {
            var name = $("#exampleInputName2").val();
            load(name);
        });
    });

    // 加载收藏列表
    function load(musicName) {
        $.ajax({
            url:"/lovemusic/findlovemusic",
            data:{"musicName": musicName},
            type:"GET",
            dataType:"json",
            success:function(obj) {
                console.log(obj);
                var data = obj.data; // 数组

                if(data.length === 0) {
                    $("#info").html("");
                    $("#emptyState").removeClass("hidden");
                    return;
                }

                // 隐藏空状态
                $("#emptyState").addClass("hidden");

                var s = '';
                for(var i = 0; i < data.length; i++) {
                    var musicUrl = data[i].url+".mp3";
                    console.log(musicUrl);

                    s += '<tr class="table-hover-row">';
                    s += '<td class="px-6 py-4 whitespace-nowrap">';
                    s += '<div class="flex items-center">';
                    s += '<div class="w-8 h-8 rounded bg-pink-100 flex items-center justify-center mr-3 flex-shrink-0">';
                    s += '<i class="fa fa-heart text-secondary"></i>';
                    s += '</div>';
                    s += '<div>';
                    s += '<div class="font-medium text-gray-900">'+data[i].title+'</div>';
                    s += '</div>';
                    s += '</div>';
                    s += '</td>';
                    s += '<td class="px-6 py-4 whitespace-nowrap text-gray-500">'+data[i].singer+'</td>';
                    s += '<td class="px-6 py-4 whitespace-nowrap">';
                    s += '<div class="flex items-center">';
                    // 原生音频播放器
                    s += '<audio src="'+ musicUrl +'" controls="controls" preload="none" class="w-full md:w-auto"></audio>';
                    s += '</div>';
                    s += '</td>';
                    s += '<td class="px-6 py-4 whitespace-nowrap">';
                    s += '<button class="bg-red-500 hover:bg-red-600 text-white px-3 py-1.5 rounded-lg btn-hover-effect flex items-center" onclick="deleteInfo('+data[i].id+')">';
                    s += '<i class="fa fa-trash mr-1"></i> 移除收藏';
                    s += '</button>';
                    s += '</td>';
                    s += '</tr>';
                }
                $("#info").html(s);
            }
        });
    }

    // 播放歌曲
    function playerSong(obj) {
        var name = obj.substring(obj.lastIndexOf("=")+1);
        // 调用播放器
        SewisePlayer.toPlay(obj, name, 0, true);

        // 更新播放器UI
        $("#playingTitle").text(name);
        // 这里可以根据实际数据添加歌手名显示逻辑
    }

    // 移除收藏
    function deleteInfo(obj) {
        console.log(obj);
        $.ajax({
            url:"/lovemusic/deletelovemusic",
            type: "POST",
            data:{"id":obj},
            dataType:"json",

            success: function(val) {
                console.log(val);

                if(val.data == true) {
                    // 删除成功
                    alert("已移除收藏！");
                    window.location.href = "loveMusic.html";
                }else{
                    alert("移除失败！");
                }
            }
        });
    }
</script>

<!-- 播放器脚本 -->
<script type="text/javascript" src="player/sewise.player.min.js"></script>
<script type="text/javascript">
    SewisePlayer.setup({
        server: "vod",
        type: "mp3",
        videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
        skin: "vodWhite",
        autostart: "false",
    });
</script>
</body>
</html>
